<template>
  <main role="main" class="main-container" ref="ProblemPageContainer" >
        <div class="problem-page-head" id="problem-page-header">

            <el-row>
                <el-col :span="10">
                    <el-tabs v-model="activeTabName" type="card" @tab-click="handleTabClick">
                        <el-tab-pane label="试题描述" name="problemDescriptionTab"></el-tab-pane>
                        <el-tab-pane label="提交记录" name="submitRecordTab"></el-tab-pane>
                    </el-tabs>
                </el-col>

                <el-col :span="4">
                    <el-select style="padding-top: 5px; padding-left: 5px"
                               placeholder="语言"
                               v-model="language"
                               @change="setHighlight()"
                    >
                        <el-option
                                v-for="item in languages"
                                :key="item.key"
                                :label="item.value"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>

                <el-col :span="8">

                </el-col>

                <el-col :span="2">
                    <el-icon style="margin-top: 20px;" color="#ffc107" @click="tipDialogVisible = true"><InfoFilled /></el-icon>
                </el-col>


            </el-row>
        </div>

        <el-dialog visible="tipDialogVisible" title="编程训练系统使用说明" width="50%" center>

            <PerfectScrollbar>
                <v-md-preview :text="INSTRUCTIONS" style="height: calc(50vh)"></v-md-preview>
            </PerfectScrollbar>

            
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="tipDialogVisible = false"
                >Confirm</el-button
                >
              </span>

        </el-dialog>

        <div class="problem-description-code-container" >


            <el-row>
                <el-col :span="10" class="problem-description">
                    <perfect-scrollbar class="problemDetailTab">
                        <div v-if="activeTabName == 'problemDescriptionTab'">

                            <v-md-preview :text="text" preview-class="vuepress-markdown-body"></v-md-preview>
                        </div>
                        <div v-if="activeTabName == 'submitRecordTab'" style="margin: 10px">
                            <el-skeleton :loading="submissionResultLoading" :rows="5" animated
                                         v-if="submitTrigger === true">
                                <template #default>

                                    <el-card style="display: flex;justify-content: space-between">
                                        <el-container>
                                            <el-aside width="100">
                                                <el-result
                                                        icon="success"
                                                        v-if="0.judgeResult.judgeResultSlug === SUBMISSION_RESULT.AC.key"
                                                        title="执行结果"
                                                        :sub-title="currentSubmissionResult.judgeResult.judgeResultName"
                                                >
                                                </el-result>
                                                <el-result
                                                        icon="error"
                                                        v-if="currentSubmissionResult.judgeResult.judgeResultSlug === SUBMISSION_RESULT.WA.key
                                                        || currentSubmissionResult.judgeResult.judgeResultSlug === SUBMISSION_RESULT.CE.key"
                                                        title="执行结果"
                                                        :sub-title="currentSubmissionResult.judgeResult.judgeResultName"
                                                >
                                                </el-result>
                                                <el-result
                                                        icon="warning"
                                                        v-if="currentSubmissionResult.judgeResult.judgeResultSlug !== SUBMISSION_RESULT.AC.key &&
                                                        currentSubmissionResult.judgeResult.judgeResultSlug !== SUBMISSION_RESULT.WA.key &&
                                                        currentSubmissionResult.judgeResult.judgeResultSlug !== SUBMISSION_RESULT.CE.key"
                                                        title="执行结果"
                                                        :sub-title="currentSubmissionResult.judgeResult.judgeResultName"
                                                >

                                                </el-result>
                                            </el-aside>
                                            <el-main>
                                                <div>
                                                    <br>
                                                    <el-row>
                                                        <span>使用语言&nbsp;:&nbsp;</span>
                                                        <span style="font-weight: bold">{{currentSubmissionResult.language.languageName}}</span>
                                                    </el-row>
                                                    <br>
                                                    <el-row>
                                                        <span>得分&nbsp;:&nbsp;</span>
                                                        <span style="font-weight: bold">{{currentSubmissionResult.judgeScore}}</span>
                                                    </el-row>
                                                    <br>
                                                    <el-row>
                                                        <span>执行用时&nbsp;:&nbsp;</span>
                                                        <span style="font-weight: bold">{{currentSubmissionResult.usedTime}} ms</span>
                                                    </el-row>
                                                    <br>
                                                    <el-row>
                                                        <span>内存消耗&nbsp;:&nbsp;</span>
                                                        <span style="font-weight: bold">{{currentSubmissionResult.usedMemory}} kb</span>
                                                    </el-row>
                                                </div>

                                            </el-main>
                                        </el-container>

                                    </el-card>

                                    <el-collapse accordion style="margin-left: 5px">
                                        <el-collapse-item title="显示详情">
                                            <el-row>
                                                <v-md-preview :text="currentSubmissionResult.judgeLog"></v-md-preview>
                                            </el-row>

                                        </el-collapse-item>
                                        <el-collapse-item title="显示提交代码">
                                            <v-md-preview :text="displayCurrentSubmissionCode"></v-md-preview>
                                        </el-collapse-item>
                                    </el-collapse>

                                </template>
                            </el-skeleton>

                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>提交结果</th>
                                    <th>执行用时</th>
                                    <th>内存消耗</th>
                                    <th>语言</th>
                                    <th>提交时间</th>
                                </tr>
                                </thead>

                                <tbody>
                                <tr v-for="(submitResult, i) in submitRecord" v-bind:key="i" @click="openSubmissionDetail(submitResult)">
                                    <td v-bind:class="{'success' : submitResult.judgeResult.judgeResultSlug === SUBMISSION_RESULT.AC.key,
                                        'danger' : (submitResult.judgeResult.judgeResultSlug === SUBMISSION_RESULT.CE.key || submitResult.judgeResult.judgeResultSlug === SUBMISSION_RESULT.WA.key),
                                        'warning' : (submitResult.judgeResult.judgeResultSlug !== SUBMISSION_RESULT.CE.key && submitResult.judgeResult.judgeResultSlug !== SUBMISSION_RESULT.AC.key
                                        && submitResult.judgeResult.judgeResultSlug !== SUBMISSION_RESULT.WA.key)
                                     }"
                                    >{{submitResult.judgeResult.judgeResultName}}</td>
                                    <td>{{submitResult.usedTime}}</td>
                                    <td>{{submitResult.usedMemory}}</td>
                                    <td>
                                        <button
                                            v-bind:class="{
                                            'badge badge-pill badge-success' : submitResult.language.languageName === TRAINING_LANGUAGES.Java.value,
                                            'badge badge-pill badge-info' : submitResult.language.languageName === TRAINING_LANGUAGES.Python.value,
                                            'badge badge-pill badge-warning' : submitResult.language.languageName === TRAINING_LANGUAGES.CPlus.value
                                            || submitResult.language.languageName === TRAINING_LANGUAGES.C.value,
                                            }"
                                        >
                                            {{submitResult.language.languageName}}
                                        </button>
                                    </td>
                                    <td>{{formatData(submitResult.submitTime)}}</td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                    </perfect-scrollbar>
                </el-col>

                <el-col :span="14">
                    <div class="problem-code-container">
                        <div class="problem-code">
                            <codeEditor
                                    v-model:value="code"
                                    :scene="type"
                                    :language-mode="languageMode"

                                    ref="codeMirrorEditor"
                            ></codeEditor>

                        </div>
                    </div>
                </el-col>

            </el-row>

        </div>

        <div class="problem-description-code-footer">
            <el-row>
                <el-col :span="6">
                    <el-button style="margin-left: 16px" @click="getAllProblems(true)">
                        题目列表
                    </el-button>
                    <el-drawer
                            v-model="drawer"
                            title="题目列表"
                            :direction="direction"
                            :with-header="false"
                            :size="400"
                    >
                        <div style="display: flex; justify-content: center">
                            <perfect-scrollbar>

                                <el-table


                                        :data="problems"
                                        :height="winHeight - 56"

                                        stripe
                                        style="width: 100%"

                                        @row-click="problemClick"

                                >
                                    <el-table-column prop="problemId" label="ID" width="60"></el-table-column>
                                    <el-table-column prop="problemName" label="试题名称" width="220"></el-table-column>
                                    <el-table-column  label="难度" width="80">
                                        <template #default="scope" >
                  <span v-bind:class="{'error' :  scope.row.problemTags === PROBLEM_TAG_SLUGS[1].value,
                                        'danger' : scope.row.problemTags === PROBLEM_TAG_SLUGS[2].value,
                                        'warning' : scope.row.problemTags === PROBLEM_TAG_SLUGS[3].value,
                                        'success' : scope.row.problemTags === PROBLEM_TAG_SLUGS[4].value,
                                     }">
                    {{scope.row.problemTags}}
                  </span>
                                        </template>

                                    </el-table-column>


                                </el-table>
                            </perfect-scrollbar>
                        </div>

                    </el-drawer>
                </el-col>
                <el-col :span="2">
                    <el-button @click="viewPreviousProblem()">
                        上一题
                    </el-button>
                </el-col>
                <el-col :span="2">

                    <el-button @click="viewNextProblem()">
                        下一题
                    </el-button>
                </el-col>
                <el-col :span="10">

                </el-col>

                <el-col :span="2">

                </el-col>

                <el-col :span="2" style="text-align: right">
                    <el-button type="success" style="margin-right: 6px" @click="submitCode()"
                               v-bind:disabled="submitDisabled === true">
                        提交代码
                    </el-button>
                </el-col>

            </el-row>
        </div>




        <el-dialog v-model="viewSubmissionDetail" title="提交详情" width="50%" center>

            <PerfectScrollbar>
                <v-md-preview :text="selectSubmissionResult" style="height: calc(60vh)" preview-class="vuepress-markdown-body"></v-md-preview>
            </PerfectScrollbar>

            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="viewSubmissionDetail = false">
                    Confirm
                </el-button>
              </span>
            </template>
        </el-dialog>



    </main>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>